<template>
  <div class="admin">
    <!-- 面包屑导航 -->
    <mybreadcrumb />

    <div class="opts">
      <el-button type="primary" @click="showDrawer">
        新增管理员<el-icon><Plus /></el-icon>
      </el-button>
    </div>

    <!-- data 属性 控制表格中展示的数据 -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%" border stripe>
      <el-table-column label="序号" width="80" type="index" />
      <el-table-column label="账号" prop="adminname" width="180" ></el-table-column>
      <el-table-column label="权限" >
        <!-- 通过插槽实现表格列内容的自定义, scope 可以获取当前行 对象 -->
        <template #default="scope">
          <el-tag class="ml-2" type="success"> {{ scope.row.role == 1 ? '管理员' : '超级管理员' }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" >
        <template #default="scope">
          <el-button @click="showEditDrawer(scope.row)">编辑</el-button>
          <el-button @click="handleDelete(scope.row.adminid)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      :before-close="handleBeforeClose"
      v-model="drawerVisible"
      :title="ruleForm.adminid?'编辑管理员':'新增管理员'"
      :direction="direction"
    >
      <!-- 新增管理员表单 -->
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="form"
        status-icon
      >
        <el-form-item v-show="false" label="id" prop="adminid">
          <el-input v-model="ruleForm.adminid" />
        </el-form-item>
        <el-form-item label="账号" prop="adminname">
          <el-input :disabled="ruleForm.adminid?true:false" v-model="ruleForm.adminname" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input :disabled="ruleForm.adminid?true:false" v-model="ruleForm.password" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="ruleForm.role" placeholder="选择一个角色">
            <el-option label="管理员" :value="1"/>
            <el-option label="超级管理员" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="权限" prop="checkedKeys">
          <!-- default-expanded-keys 默认展开的节点 -->
          <!-- default-checked-keys 默认选中的节点 -->
          <el-tree
            ref="tree"
            @check="handleCheck"
            :data="keysdata"
            node-key="id"
            show-checkbox
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            {{ ruleForm.adminid?'编辑管理员':'新增管理员' }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>

import {ref,onMounted,nextTick} from 'vue'
import service from '@/api'

var tree = ref();

var ruleFormRef = ref();

var loading = ref(false)

var drawerVisible = ref(false)

var tableData = ref([])

var keysdata = [
  {
    id: '1',
    label: '首页'
  },
  {
    id: '2',
    label: '轮播图管理',
    children: [
      {
        id: '2-1',
        label: '轮播图列表'
      },
    ],
  },
  {
    id: '3',
    label: '账号管理',
    children: [
      {
        id: '3-1',
        label: '管理员列表'
      },
    ],
  },
  {
    id: '4',
    label: '产品管理',
    children: [
      {
        id: '4-1',
        label: '产品列表'
      },
      {
        id: '4-2',
        label: '秒杀列表'
      },
      {
        id: '4-3',
        label: '推荐列表'
      },
      {
        id: '4-4',
        label: '筛选列表'
      },
    ],
  },
  {
    id: '5',
    label: '数据可视化',
    children: [
      {
        id: '5-1',
        label: 'echarts使用'
      },
    ],
  },
  {
    id: '6',
    label: '编辑器',
    children: [
      {
        id: '6-1',
        label: '编辑器使用'
      },
    ],
  },
  {
    id: '7',
    label: 'excel管理',
    children: [
      {
        id: '7-1',
        label: 'excel使用'
      },
    ],
  },
  {
    id: '8',
    label: '地图管理',
    children: [
      {
        id: '8-1',
        label: '百度地图'
      },
    ],
  },
]

var ruleForm = ref({
  adminid:'',
  adminname:'',
  password:'',
  role:'',
  checkedKeys:''
})

var rules = {
  adminname: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  role: [{ required: true, message: '请选择角色', trigger: 'blur' }],
  checkedKeys: [{ required: true, message: '请选择合适的权限', trigger: 'blur' }],
}

var handleBeforeClose = (done)=>{
  //清空表单
  ruleForm.value = {
    adminid:'',
    adminname:'',
    password:'',
    role:'',
    checkedKeys:''
  }
  //清空表单中的树形控件
  tree.value.setCheckedKeys([]);
  //手动关闭抽屉
  done();
}

var handleDelete = async (adminid)=>{
  //发请求, 删除管理员
  var res = await service.admin.admin_delete( { adminid } );
  if( res.data.code == 200 ){
    ElNotification({
        title:'删除通知',
        message: '删除管理员成功!',
        type:'success',
        duration: 1000
    })
    //查找需要删除的管理员
    var i = tableData.value.findIndex(item=>item.adminid==adminid);
    //删除
    if( i != -1 ) tableData.value.splice(i,1);
  }
}

var handleCheck = (prop1,{ checkedKeys })=>{
  //获取勾选的权限节点, 保存起来
  ruleForm.value.checkedKeys = checkedKeys;
}

onMounted( async ()=>{
  //显示loading
  loading.value = true;
  //发请求,获取管理员列表
  var res = await service.admin.admin_list();
  tableData.value = res.data.data;
  //隐藏loading
  loading.value = false;

})

//显示新增 弹框
var showDrawer = ()=>{
  //显示抽屉
  drawerVisible.value = true;
}

//显示编辑 弹框
var showEditDrawer = (admin)=>{
  //显示抽屉
  drawerVisible.value = true;
  //回显数据到表单 ( 只能回显前三项(前三项是双向绑定) )
  ruleForm.value = admin;
  
  //设置树形控件 选中的节点
  nextTick(()=>{
    tree.value.setCheckedKeys(admin.checkedKeys);
  })
}

var submitForm = ()=>{
  //校验表单数据
  ruleFormRef.value.validate( async (valid)=>{
    if(valid){
      console.log( ruleForm.value );
      if( ruleForm.value.adminid ){ //有adminid 执行编辑
        //发请求, 编辑管理员
        var res = await service.admin.admin_update( ruleForm.value );
        if( res.data.code == 200 ){
          ElNotification({
              title:'编辑通知',
              message: '编辑管理员成功!',
              type:'success',
              duration: 1000
          })
          //隐藏抽屉
          drawerVisible.value = false;
          //清空表单
          ruleForm.value = {
            adminid:'',
            adminname:'',
            password:'',
            role:'',
            checkedKeys:''
          }
          //清空表单中的树形控件
          tree.value.setCheckedKeys([]);
        }else{
          ElNotification({
              title:'编辑通知',
              message: '编辑管理员失败!',
              type:'error',
              duration: 1000
          })
        }
      }else{ //没有adminid 执行新增
        //发请求, 新增管理员
        var res = await service.admin.admin_add( ruleForm.value );
        if( res.data.code == 200 ){
          ElNotification({
              title:'新增通知',
              message: '新增管理员成功!',
              type:'success',
              duration: 1000
          })
          //隐藏抽屉
          drawerVisible.value = false;
          //清空表单
          ruleForm.value = {
            adminid:'',
            adminname:'',
            password:'',
            role:'',
            checkedKeys:''
          }
          //清空表单中的树形控件
          tree.value.setCheckedKeys([]);
        }else{
          ElNotification({
              title:'新增通知',
              message: '新增管理员失败!',
              type:'error',
              duration: 1000
          })
        }
      }
    }
  })
}

</script>

<style scoped lang='scss'>
.admin{
  .opts{
    margin: 20px 0;
  }
}
</style>